import React, { Component } from "react"
import Header from "../Header"
import Footer from "../Footer"
import List from "../List"
// import PropTypes from "prop-types"
export default class Home extends Component {
  // 类型限制
  //   static propTypes = {
  //     add: PropTypes.func.isRequired,
  //   }
  state = {
    list: [
      { id: 3, name: "打豆豆", check: false },
      { id: 2, name: "睡觉", check: false },
      { id: 1, name: "吃饭", check: false },
    ],
    lists: [],
  }
  add = (e) => {
    const { list } = this.state
    const str = {
      id: list.length + 1,
      name: e,
      check: false,
    }
    const newlist = [str, ...list]
    this.setState({ list: newlist })
  }
  click = (e) => {
    let { list, lists } = this.state
    let str = list.splice(e, 1)
    str[0].check = !str[0].check
    this.setState({ lists: [...lists, ...str] })
    this.setState({ list: list })
  }
  changes = (e) => {
    const index = this.maps(e)
    const ue = e[1] === "list" ? "lists" : "list"
    const ues = this.state[ue]
    let str = this.state[e[1]].splice(index, 1)
    str[0].check = !str[0].check
    this.setState({ [ue]: [...ues, ...str], [e[1]]: this.state[[e[1]]] })
  }
  deletes = (e) => {
    let { list, lists } = this.state
    const index = this.maps(e)
    this.state[e[1]].splice(index, 1)
    this.setState({ list: list, lists: lists })
  }
  maps(e) {
    let index = ""
    this.state[e[1]].map((item, i) => {
      if (item.id === e[0]) index = i
      return item
    })
    return index
  }
  render() {
    const { list, lists } = this.state
    return (
      <div className="App">
        <Header add={this.add} />
        <List
          changes={this.changes}
          clicks={this.click}
          deletes={this.deletes}
          lists={lists}
          list={list}
        />
        <Footer count={lists.length} total={list.length + lists.length} />
      </div>
    )
  }
}
